<template>
    <el-form ref="ruleFormRef" label-position="top" :model="formInline" :rules="formRules" label-width="auto"
        v-loading="isLoading">
        <el-row :gutter="30">

            <re-col :value='12' :xs='12' :sm='12'>
                <el-form-item label='所属单位' prop=''>
                   {{ isNullOrEmpty( operate.unityName ) }}
                </el-form-item>
            </re-col>
            <re-col :value='12' :xs='12' :sm='12'>
                <el-form-item label='所属项目' prop=''>

                  {{ isNullOrEmpty( operate.projectName ) }}
                </el-form-item>
            </re-col>
            <re-col :value='12' :xs='12' :sm='12'>
                <el-form-item label='国标设备名称' prop='monitorName'>
                    <el-input :maxlength="30" :show-word-limit="true"
                    v-model='formInline.monitorName' clearable :placeholder='prompt?.monitorName' />
                </el-form-item>
            </re-col>
            <re-col :value='12' :xs='12' :sm='12'>
                <el-form-item :label='titles?.deviceId' prop='deviceId'>
                    <el-input :maxlength="20" :show-word-limit="true"
                    v-model='formInline.deviceId' clearable placeholder='请输入设备编号' />
                </el-form-item>
            </re-col>
            <re-col :value='12' :xs='12' :sm='12'>
                <el-form-item :label='titles?.password' prop='password'>
                    <el-input 
                    type="password" show-password
                    v-model='formInline.password' clearable :placeholder='prompt?.password' />
                </el-form-item>
            </re-col>





        </el-row>
    </el-form>
</template>

<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'

import { addDialog } from "@/components/ReDialog";

import { ref, reactive } from "vue";
import ReCol from "@/components/ReCol";
import type { FormRules } from "element-plus";
import { titles, prompt } from './index';
import { PASSWORD_REGS,  } from '@/constant/index'
import type { infoType } from '@/api/operate/video-management/index';


import { usePageVariablesStoreHook,  } from '@/store/modules/pageVariables'
const operate = usePageVariablesStoreHook().getOperate()
const ruleFormRef = ref();
type FormProps = {
    formInline: infoType,
    isLoading: boolean,
    isEdit: boolean,
}
const props = withDefaults(defineProps<FormProps>(), {
    formInline: () => ({} as infoType),
    isLoading: false,
    isEdit: false,
});

const formRules = reactive(<FormRules>{
    monitorName: [{ required: true, message: prompt?.monitorName, trigger: 'blur' },],
    deviceId: [{ required: true, message: prompt?.deviceId, trigger: 'blur' },],
    password: [{ required: true, message: prompt?.password, trigger: 'blur' },
    { pattern: PASSWORD_REGS.role, message: PASSWORD_REGS.text, trigger: 'blur' }
    ],

});






function getRef() {
    return ruleFormRef.value;
}

defineExpose({ getRef });

</script>
